<template>
	<div class="coachs">
    <ul class="list-coachs" v-if="coachArr.length > 0">
      <li @click="goDetail(item)" v-for="(item, index) in coachArr" :key="index">
        <div class="cover"><img mode="aspectFit" :src="item.portraitPictureFileUrl ? item.portraitPictureFileUrl : 'https://newmefit.cn/resource/gym/base/base1.jpg'"></div>
        <div class="course-info">
          <h4>{{item.userName}}</h4>
          <uni-rate v-model="item.starLevel" :readonly="true"/>
          <p>
            <em v-for="(o, i) in item.teachCourseList" :key="i">
              <i v-if="i<2">{{ o.courseName }}</i>
              <i v-if="i==2&&item.teachCourseList.length>2">等{{ item.teachCourseList.length }}个教程</i>
            </em>
          </p>
        </div>
      </li>
    </ul>
    <div class="no-data" v-if="coachArr.length === 0">
      <img src="https://newmefit.cn/resource/gym/base/base6.png">
    </div>
    <!-- <uni-load-more :status="more"></uni-load-more> -->
	</div>
</template>

<script>
  import { listStoreEnabled } from '@/api/manageApi'
  import {mapGetters} from 'vuex'
  import {getStore, setStore} from '@/util/service'
	export default {
		data() {
			return {
        page: 1,
        limit: 10,
        more: 'more',
        rateValue: 5,
        coachArr: [],
        storeName: ''
			}
    },
    computed:{
			...mapGetters(['uniToken'])
		},
		onLoad (option) {
      this.storeName = option.storeName
      this.getListStoreEnabled(option.storeId)
    },
		methods: {
      // 获取推荐教练列表
      getListStoreEnabled (storeId) {
        var params = {
          storeId: storeId,
          recommend: 0
        }
        listStoreEnabled(params).then(res => {
          console.log(res)
          if (res.code == '200') {
            var data = res.data
            this.coachArr = data
          }
        })
      },
      goDetail (item) {
        var url = '/pagesA/home/coachDetail?id='+item.userId + '&storeName=' + this.storeName
        // setStore('teachCourseList', JSON.stringify(item.teachCourseList?item.teachCourseList:[]))
        this.goUrl(url)
      }
		}
	}
</script>

<style lang="scss">
.coachs{
  width: 702rpx;
  margin: 0 auto;
  .list-coachs{
    width: 100%;
    li{
      width: 100%;
      // height: 204rpx; 
      background: #FFFFFF;
      border-radius: 25rpx;
      box-sizing: border-box;
      padding: 32rpx 28rpx;
      display: flex;
      margin-top: 24rpx;
      .cover{
        width: 140rpx;
        height: 140rpx;
        line-height: 140rpx;
        text-align: center;
        background: #f5f5f5;
        border-radius: 10rpx;
        margin-right: 20rpx;
        img{
          max-width: 100%;
          max-height: 100%;
          vertical-align: middle;
          border-radius: 15rpx;
        }
      }
      p{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      h4{
        font-size: 30rpx;
        color: #1E1E1E;
        line-height: 30rpx;
        margin-bottom: 13rpx;
      }
      i{
        // width: 150rpx;
        padding: 0 10rpx;
        height: 36rpx;
        line-height: 36rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
        border: 1px solid #BFBFBF;
        font-size: 22rpx;
        color: #838383;
        display: inline-block;
        margin-top: 6rpx;
        margin-right: 10rpx;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .uni-rate{
        margin: 10rpx 0;
      }
    }
  }
}
</style>
